<template>
  <div>
    <div class="">
      <SearchComp :searchForm="searchForm"
        :searchData="queryString"
        :searchAction="searchAction"></SearchComp>
    </div>
    <div class="">
      <div class="btnStyle flex-between ">
        <ButtonComp :buttonData="buttonData" />
      </div>
      <TableCompEle class="m-t"
        ref="multipleTable"
        :tableData="tableData"
        :tableConfig="tableConfig"
        :tableAction="tableAction"
        :isSelect="true"
        :isIndex="true"
        :isShowPage="true"
        :queryParams="queryParams"
        @getPagination="getList"
        @handleSelectionChange="handleSelectionChange">
      </TableCompEle>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      multipleSelection: [],
      queryParams: {
        total: 20,
        currentPage: 1,
        pageSize: 10
      },
      buttonData: [
        {
          kind: 'button',
          label: '批量导出',
          plain: false,
          size: 'small',
          type: 'primary',
          click: () => {}
        }
      ],
      tableData: [
        {
          name: '活细胞实时成像分析系统',
          name2: '周燕丽',
          name3: '2024-03-09',
          name4: '按机时预约',
          name6: '中国科学院',
          name7: '王新亮',
          name8: '13820384935',
          status: 2,
          statusValue: '待审核'
        },
        {
          name: '国家蛋白质科学中心',
          name2: '周燕丽',
          name3: '2024-03-09',
          name4: '按机时预约',
          name6: '中国科学院',
          name7: '王新亮',
          name8: '13820384935',
          status: 2,
          statusValue: '待审核'
        },
        {
          name: '蛋白质制备与鉴定系统',
          name2: '周燕丽',
          name3: '2024-03-09',
          name4: '按机时预约',
          name6: '中国科学院',
          name7: '王新亮',
          name8: '13820384935',
          status: 2,
          statusValue: '待审核'
        },
        {
          name: '细胞/分子成像系统',
          name2: '周燕丽',
          name3: '2024-03-09',
          name4: '按机时预约',
          name6: '中国科学院',
          name7: '王新亮',
          name8: '13820384935',
          status: 2,
          statusValue: '待审核'
        },
        {
          name: '长直线性能试验路',
          name2: '周燕丽',
          name3: '2024-03-09',
          name4: '按机时预约',
          name6: '中国科学院',
          name7: '王新亮',
          name8: '13820384935',
          status: 2,
          statusValue: '待审核'
        },
        {
          name: '国家汽车整车风洞中心',
          name2: '周燕丽',
          name3: '2024-03-09',
          name4: '按机时预约',
          name6: '中国科学院',
          name7: '王新亮',
          name8: '13820384935',
          status: 2,
          statusValue: '待审核'
        }
      ],
      tableConfig: [
        {
          prop: 'name',
          label: '设施仪器名称'
        },
        {
          prop: 'name2',
          label: '预约人'
        },
        {
          prop: 'name3',
          label: '预约时间'
        },
        {
          prop: 'name4',
          label: '预约方式'
        },
        {
          prop: 'name6',
          label: '用户单位'
        },
        {
          prop: 'name7',
          label: '联系人'
        },
        {
          prop: 'name8',
          label: '联系方式'
        }
      ],
      tableAction: {
        align: () => 'center',
        width: () => String(120),
        operations: [
          {
            label: '查看',
            isLink: true,
            type: 'primary',
            method: row => {
              const obj = {
                title: '查看预约方式及规则',
                type: 'look',
                data: row
              }
              this.$refs.addRef.show(obj)
            }
          }
        ]
      },
      queryString: {
        name: '',
        yearStr: ''
      },
      searchForm: {
        changeMethod: () => {
          this.queryParams.currentPage = 1
          this.getList()
        },
        formData: [
          {
            type: 'Input',
            label: '设施仪器名称',
            prop: 'name',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入'
          },
          {
            type: 'Input',
            label: '预约人',
            prop: 'name',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入'
          },
          {
            type: 'Input',
            label: '预约时间',
            prop: 'name',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入'
          },
          {
            type: 'Input',
            label: '预约方式',
            prop: 'name',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入'
          }
        ]
      },
      searchAction: [
        {
          label: '查询',
          type: 'primary',
          handle: () => {
            this.queryParams.currentPage = 1
            this.$refs.multipleTable.clearSelection()
          }
        },
        {
          label: '重置',
          type: 'primary',
          plain: true,
          handle: () => {
            this.queryString = {
              name: '',
              yearStr: ''
            }
            this.queryParams.currentPage = 1
          }
        }
      ]
    }
  },
  methods: {
    getList() {}
  }
}
</script>

<style lang="less" scoped>
.left {
  ul {
    li {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 18px;
      color: #333333;
      line-height: 30px;
      text-align: left;
      font-style: normal;
      padding: 20px;
      text-align: center;
      i {
        color: #febe67;
      }
      &.active {
        background: rgba(29, 111, 219, 0.08);
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        color: #1d6fdb;
        line-height: 30px;
        text-align: center;
        font-style: normal;
        i {
          color: #1d6fdb;
        }
      }
    }
  }
}
</style>